<template>
    <el-dropdown split-button type="primary" @command="handleMenuItemClick">
        {{text}}
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in list"
                              v-text="item"
                              :command="item"
            ></el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>
<script>

    export default {

        data() {
            return {
                text : ''
            }
        },
        mounted() {
            if(!this.defaultText || this.defaultText.length == 0){
                if(this.list && this.list.length > 0)
                this.text = this.list[0];
            }else{
                this.text = this.defaultText;
            }
        },
        created: function () {
            console.log("text : " + this.text);
        },
        methods: {
            handleMenuItemClick(command, instance) {
                this.$emit('command', command, instance);
                this.text = command;
            }
        },
        props: {
            list:Array,
            defaultText: String,
            trigger: {
                type: String,
                default: 'hover'
            },
            type: String,
            size: {
                type: String,
                default: ''
            },
            splitButton: Boolean,
            hideOnClick: {
                type: Boolean,
                default: true
            },
            placement: {
                type: String,
                default: 'bottom-end'
            },
            visibleArrow: {
                default: true
            },
            showTimeout: {
                type: Number,
                default: 250
            },
            hideTimeout: {
                type: Number,
                default: 150
            },
//            style: String
        },
    }
</script>
